<template>
  <basic-container>
    <el-tabs v-model="activeName" style="margin: 0 10px" @tab-click="handleTabClick">
      <el-tab-pane label="班次配置" name="station"> </el-tab-pane>
      <el-tab-pane label="班组配置" name="section"> </el-tab-pane>
      <avue-crud
        v-if="activeName === 'station'"
        :option="option"
        :table-loading="loading"
        :data="data"
        :page.sync="page"
        :permission="permissionList"
        :before-open="beforeOpen"
        v-model="form"
        ref="crud"
        @row-update="rowUpdate"
        @row-save="rowSave"
        @row-del="rowDel"
        @search-change="searchChange"
        @search-reset="searchReset"
        @selection-change="selectionChange"
        @current-change="currentChange"
        @size-change="sizeChange"
        @refresh-change="refreshChange"
        @on-load="onLoad"
        class="tableStyle"
      >
        <template slot="menuLeft">
          <el-button type="primary" @click="addEvent('add')" size="small" icon="el-icon-plus">新 增</el-button>
          <el-button type="danger" icon="el-icon-delete" @click="handleDelete" size="small" plain>删 除</el-button>
        </template>
        <template slot="menuRight">
          <user-table-config :option="option" @confirm="(val) => handleSetUserConfig(val, pageCode)"></user-table-config>
        </template>
        <template slot-scope="{ row }" slot="menu">
          <el-button @click="viewEvent(row, 'look')" type="text" style="font-size: 12px">
            <i class="el-icon-view"></i>
            <span>查 看</span>
          </el-button>
          <el-button @click="editEvent(row, 'edit')" type="text" style="font-size: 12px">
            <i class="el-icon-edit"></i>
            <span>编 辑</span>
          </el-button>
          <el-button @click="deletesEvent(row, 'delete')" type="text" style="font-size: 12px">
            <i class="el-icon-delete"></i>
            <span>删 除</span>
          </el-button>
        </template>
      </avue-crud>
      <team-configuration v-if="activeName === 'section'"> </team-configuration>
    </el-tabs>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width="50%"
      append-to-body
      class="dialogStyle"
      ref="ruleForm"
      :close-on-click-modal="bolDialog"
      show-close
      @close="closeEvent('ruleForm')"
    >
      <p class="verticalStyle">
        <el-divider direction="vertical"></el-divider>
        <span>基本信息</span>
      </p>
      <!-- <el-row> </el-row> -->
      <el-form :model="ruleForm" :label-width="auto" :rules="rules" ref="ruleForm">
        <el-row style="margin-left: 10px; margin-bottom: 10px">
          <el-col :span="12">
            <el-form-item label="班次名称" prop="name">
              <el-input :disabled="disabledShift" placeholder="请输入班次名称" v-model="ruleForm.name" style="width: 65%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="班次类型" prop="type">
              <el-select v-model="ruleForm.type" placeholder="请选择班次类型" style="width: 65%" :disabled="disabledShift">
                <el-option v-for="item in shiftTypes" :key="item.dictKey" :label="item.dictValue" border="none" :value="item.dictKey"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-left: 10px; margin-bottom: 10px">
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-switch v-model="ruleForm.status" @change="handleSwitch($event)"> </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="basic">
          <el-form-item label="工作时段:" prop="workTime" style="margin-left: 10px">
            <el-time-picker
              :format="timeFormat"
              :disabled="disabledShift"
              @change="shiftFromChange"
              :value-format="timeFormat"
              v-model="ruleForm.shiftFrom"
              style="width: 130px"
            ></el-time-picker>
            当日 ——
            <el-time-picker
              :format="timeFormat"
              :disabled="disabledShift"
              :value-format="timeFormat"
              @change="shiftToChange"
              :picker-options="pickerShiftToOptions"
              v-model="ruleForm.shiftTo"
              style="width: 130px"
            ></el-time-picker>
            <el-select :disabled="disabledShift" style="width: 100px; margin-left: 10px" v-model="ruleForm.isCrossDay" @change="crossDayChange">
              <el-option placeholder="请选择" v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="休息设置:" prop="workHours" style="margin-left: 10px; margin-top: 5px">
            <el-checkbox :disabled="disabledShift" v-model="checkedTime" @change="checkBoxEvent"> </el-checkbox>
            <span> 扣除休息时段 </span>
          </el-form-item>
        </el-row>
        <div v-if="checkedTime">
          <el-row v-for="(shiftBreaktime, index) in ruleForm.shiftBreaktimes" :key="index">
            <el-time-picker
              :format="timeFormat"
              :disabled="disabledShift"
              @change="calculateWorkingHours"
              :value-format="timeFormat"
              v-model="shiftBreaktime.breaktimeFrom"
              style="width: 130px; margin-left: 80px"
            ></el-time-picker>
            当日 ——
            <el-time-picker
              :format="timeFormat"
              :disabled="disabledShift"
              @change="calculateWorkingHours"
              :value-format="timeFormat"
              v-model="shiftBreaktime.breaktimeTo"
              style="width: 130px"
            ></el-time-picker>
            <el-select :disabled="disabledShift" style="width: 100px; margin-left: 10px" @change="calculateWorkingHours" v-model="shiftBreaktime.isCrossDay">
              <el-option placeholder="请选择" v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <i class="el-icon-circle-plus-outline iconStyle" @click="iconAddEvent"></i>
            <i class="el-icon-remove-outline iconStyle" @click="decrease(index)"></i>
          </el-row>
        </div>
        <el-row>
          <el-form-item label-width="80px">
            <span>工作时长 {{ ruleForm.workingHours }} 小时</span>
          </el-form-item>
        </el-row>
        <!-- <el-row> -->
        <el-form-item label="备注:" style="margin-left: 10px">
          <el-input type="textarea" :disabled="disabledShift" v-model="ruleForm.remark" :rows="3"></el-input>
        </el-form-item>
        <!-- </el-row> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="!disabledShift" @click="resetForm('ruleForm')" size="small" icon="el-icon-circle-close">取 消</el-button>
        <el-button
          v-if="!disabledShift"
          @click="submitForm('ruleForm')"
          type="primary"
          size="small"
          :icon="title == '添加班次' ? 'el-icon-circle-plus-outline' : 'el-icon-circle-check'"
          >{{ dialogTitle == '添加班次' ? '保 存' : '修 改' }}</el-button
        >
      </span>
    </el-dialog>
  </basic-container>
</template>

<script>
import { getTableList, getShfitType, getDetail, add, update, remove, postTableDetail, postAddData, exportTableData } from '@/api/product/shift';
import teamConfiguration from '@/views/product/teamConfiguration.vue';
import { mapGetters } from 'vuex';
import userTableConfig from '@/components/user-table-config';
import userConfig from '@/mixins/userConfig';
import { number } from 'echarts/core';
export default {
  name: 'shiftgroupManagement',
  components: {
    userTableConfig,
    teamConfiguration
  },

  mixins: [userConfig()],
  data() {
    const checkShiftType = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请选择班次类型'));
      }
      callback();
    };
    const checkWorkTime = (rule, value, callback) => {
      if (!this.ruleForm.shiftFrom || !this.ruleForm.shiftTo) {
        return callback(new Error('请选择工作时段'));
      }
      callback();
    };
    return {
      activeName: 'station',
      pageCode: 'PRODUCT_SHIFT',
      timeFormat: 'HH:mm',
      shiftTypes: [], //关联数据字典，所有班次类型
      form: {},
      query: {},
      loading: true,
      disabledShift: false,
      selectableShiftFromRange: '',
      pickerShiftFromOptions: {},
      pickerShiftToOptions: {
        //控制班次工作时间结束范围
        selectableRange: ''
      },
      selectionList: [],
      bolDialog: false,
      dialogTitle: '',
      breaktimeFrom: '', // 开始休息时间
      breaktimeTo: '', // 结束时间段
      selectValue: false,
      decreaseDisplay: true,
      decreaseDisplay2: true,
      decreaseDisplay3: true,
      options: [
        {
          value: false,
          label: '当日'
        },
        {
          value: true,
          label: '次日'
        }
      ],
      option: {
        height: 'calc(100vh - 415px)', // 超过来,会显示滚动条
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        //viewBtn: true,
        selection: true,
        dialogClickModal: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        searchMenuPosition: 'right', // 查询和删除按钮的显示
        excelBtn: false, // 导出
        indexLabel: '序号',
        columnBtn: false,
        column: [
          {
            label: '班次名称',
            prop: 'name',
            search: true,
            rules: [
              {
                required: true,
                message: '请输入班次名称',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '班次类型',
            prop: 'type',
            search: true,
            type: 'select',
            dicUrl: '/api/blade-system/dict/dictionary?code=shift_type',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            }
          },
          {
            label: '班次时间',
            prop: 'startEndTime',
            addDisplay: false,
            rules: [
              {
                required: true,
                message: '请输入开始时间',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '状态',
            prop: 'status',
            type: 'switch',
            value: 1,
            dataType: 'number',
            align: 'center',
            dicData: [
              {
                label: '禁用',
                value: 0
              },
              {
                label: '启用',
                value: 1
              }
            ],
            html: true,
            formatter: (val) => {
              if (val.status == 1) {
                return '<span style="color:#70b603">启用</span>';
              } else {
                return '<span style="color:red">禁用</span>';
              }
            }
          },
          {
            label: '备注',
            prop: 'remark',
            addDisplay: false
          },
          {
            label: '最近更新人',
            prop: 'updateUserName'
          },
          {
            label: '最近更新时间',
            prop: 'updateTime'
          }
        ]
      },
      dialogVisible: false,
      data: [],
      rules: {
        name: [
          {
            required: true,
            message: '请输入班次名称',
            trigger: 'blur'
          }
        ],
        type: [
          {
            required: true,
            message: '请选择班次类型',
            validator: checkShiftType,
            trigger: 'change'
          }
        ],
        workTime: [
          {
            required: true,
            message: '请选择工作时间',
            trigger: 'change',
            validator: checkWorkTime
          }
        ]
      },
      ruleForm: {
        name: '',
        shiftType: '',
        remark: '',
        workingHours: '0',
        isCrossDay: false,
        shiftBreaktimes: [
          {
            breaktimeFrom: '',
            breaktimeTo: '',
            isCrossDay: false
          }
        ]
      },
      checkedTime: false,
      page: {
        current: 1,
        size: 10
      },
      searchCriteria: {
        name: '',
        type: ''
      }
    };
  },

  computed: {
    ...mapGetters(['permission']),
    permissionList() {
      return {
        // addBtn: this.vaildData(this.permission.shift_add, false),
        // viewBtn: this.vaildData(this.permission.shift_view, false),
        // delBtn: this.vaildData(this.permission.shift_delete, false),
        // editBtn: this.vaildData(this.permission.shift_edit, false)
      };
    }
  },
  mounted() {
    this.$nextTick(() => {
      //搜索与表格结构分隔
      this.$structuralSplit();
    });

    this.getTableData();
    this.getShiftTypes();
  },
  methods: {
    handleSwitch(value) {
      console.log(value, 'value');
    },
    getTableData() {
      let params = {
        current: this.page.current,
        size: this.page.size
      };
      getTableList(params, Object.assign(this.searchCriteria))
        .then((res) => {
          if (res.data.code === 200) {
            this.data = res.data.data.records.map((item) => ({
              ...item,
              startEndTime: item.shiftFrom + '~' + item.shiftTo
            }));
            this.page.total = res.data.data.total;
            this.loading = false;
          } else {
            this.loading = true;
          }
        })
        .catch((err) => {
          this.loading = true;
        });
    },
    /**
     * 查询数据字典班次类型
     */
    getShiftTypes() {
      getShfitType()
        .then((res) => {
          if (res.data.code === 200) {
            this.shiftTypes = res.data.data;
          }
        })
        .catch((err) => {});
    },

    looktableRow(val) {
      getDetail(val)
        .then((res) => {
          let dataCurrent = res.data.data;
          this.ruleForm = { ...dataCurrent };
          this.ruleForm.status = dataCurrent.status == 1 ? true : false;
          this.ruleForm.shiftBreaktimes = this.ruleForm.shiftBreaktimes || [];
          this.checkedTime = this.ruleForm.shiftBreaktimes && this.ruleForm.shiftBreaktimes.length > 0;
        })
        .catch((err) => {
          this.$message(err.msg);
        });
    },
    shiftFromChange() {
      this.controlTime();
      this.calculateWorkingHours();
    },
    shiftToChange(val) {
      this.calculateWorkingHours();
    },
    //控制班次结束时间必须大于起始时间
    controlTime() {
      let selectableRange = `00:00:00 - 23:59:59`;
      if (this.ruleForm.shiftFrom && !this.ruleForm.isCrossDay) {
        selectableRange = `${this.ruleForm.shiftFrom}:00 - 23:59:59`;
      }
      this.$set(this.pickerShiftToOptions, 'selectableRange', selectableRange);
    },
    crossDayChange() {
      this.controlTime();
      this.calculateWorkingHours();
    },
    /**
     * shiftFrom string 开始时间
     * shiftTo string 结束时间
     * type string 班次类型 白班DAY || 夜班NIGHT
     * shiftBreaktimes Array<{breaktimeFrom:开始休息时间,breaktimeTo:结束休息时间}> 多休息时间段集合
     */
    calculateWorkingHours() {
      if (this.ruleForm.shiftFrom && this.ruleForm.shiftTo) {
        let duration1 = this.$moment.duration(this.ruleForm.shiftFrom);
        let day = 0;
        if (this.ruleForm.isCrossDay) {
          day = 1;
        }
        let duration2 = this.$moment.duration(this.ruleForm.shiftTo);
        let shiftFromDate = this.$moment().date(0).hours(duration1._data.hours).minutes(duration1._data.minutes).seconds(0).milliseconds(0);
        let shiftToDate = this.$moment().date(day).hours(duration2._data.hours).minutes(duration2._data.minutes).seconds(0).milliseconds(0);
        let shiftBreaktimes = this.ruleForm.shiftBreaktimes.filter((item) => item.breaktimeFrom && item.breaktimeTo);
        let shiftFromTime = new Date(`2000-01-01 ${this.ruleForm.shiftFrom}:00`);
        let shiftToTime = new Date(`2000-01-0${day + 1} ${this.ruleForm.shiftTo}:00`);
        //目前不需要对时间进行交集计算处理
        let times = shiftBreaktimes.map((shiftBreaktime) => {
          let shiftBreakDay = 0;
          if (shiftBreaktime.isCrossDay) {
            shiftBreakDay = 1;
          }
          let breakFromDate = new Date(`2000-01-01 ${shiftBreaktime.breaktimeFrom}:00`);
          let breakToDate = new Date(`2000-01-0${shiftBreakDay + 1} ${shiftBreaktime.breaktimeTo}:00`);
          return {
            start: breakFromDate,
            end: breakToDate,
            shiftBreakDay: shiftBreakDay
          };
        });
        let restTimes = 0;
        //计算休息的时间，存入restTimes中
        let breaktimes = times.map((item) => {
          let breakFromDateItem = this.$moment().date(0).hours(item.start.getHours()).minutes(item.start.getMinutes()).seconds(0).milliseconds(0);
          let breakToDateItem = this.$moment().date(item.shiftBreakDay).hours(item.end.getHours()).minutes(item.end.getMinutes()).seconds(0).milliseconds(0);
          let minutes = breakToDateItem.diff(breakFromDateItem, 'minutes');
          restTimes = restTimes + minutes;
          return breakToDateItem.diff(breakFromDateItem, 'minutes');
        });

        let diffDate = shiftToDate.diff(shiftFromDate, 'minutes');
        this.ruleForm.workingHours = ((diffDate - restTimes) / 60).toFixed(2);
      }
    },

    deleteCurrentData(id) {
      console.log(JSON.parse(JSON.stringify(id)), 'idididde;eye');
      id ? JSON.parse(JSON.stringify(id)) : '';
      postTableDetail(id)
        .then((res) => {
          console.log(res.data.code, 'res.data.coderes.data.code');
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getTableData();
          }
        })
        .catch((err) => {});
    },
    addData(params) {
      postAddData(params)
        .then((res) => {
          this.getTableData();
        })
        .catch((err) => {});
    },
    addEvent(type) {
      this.dialogVisible = true;
      this.ruleForm = {
        name: '',
        shiftType: '',
        remark: '',
        workingHours: '0',
        isCrossDay: false,
        shiftBreaktimes: []
      };
      this.checkedTime = false;
      this.disabledShift = false;
      type === 'add' ? (this.dialogTitle = '添加班次') : '';
    },
    viewEvent(val, type) {
      this.dialogVisible = true;
      this.looktableRow(val.id);
      this.disabledShift = true;
      type === 'look' ? (this.dialogTitle = '查看班次') : '';
    },
    editEvent(val, type) {
      this.dialogVisible = true;
      this.disabledShift = false;
      this.looktableRow(val.id);
      type === 'edit' ? (this.dialogTitle = '编辑班次') : '';
    },
    deletesEvent(row) {
      this.deleteModal(row.id);
    },
    deleteModal(id) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log('成功的回调, success');
        this.deleteCurrentData(id);
      });
    },

    checkBoxEvent(value) {
      this.checkedTime = value;
      if (value && (this.ruleForm.shiftBreaktimes || this.ruleForm.shiftBreaktimes.length === 0)) {
        this.ruleForm.shiftBreaktimes = [
          {
            breaktimeFrom: '',
            breaktimeTo: '',
            isCrossDay: false
          }
        ];
      }
      if (!value) {
        this.ruleForm.shiftBreaktimes = [];
        this.calculateWorkingHours();
      }
    },

    iconAddEvent() {
      if (!this.disabledShift && this.ruleForm.shiftBreaktimes.length < 3) {
        this.ruleForm.shiftBreaktimes.push({
          breaktimeFrom: '',
          breaktimeTo: '',
          isCrossDay: false
        });
      }
    },

    decrease(value) {
      if (!this.disabledShift) {
        this.ruleForm.shiftBreaktimes = this.ruleForm.shiftBreaktimes.filter((item, index) => {
          return value != index;
        });
        this.checkedTime = this.ruleForm.shiftBreaktimes.length != 0;
        this.calculateWorkingHours();
      }
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = this.ruleForm;
          console.log(params, 'params');
          if (Number(params.workingHours) <= 0) {
            this.$message.warning('请选择正确的工作时长');
            return;
          }
          if (this.checkedTime) {
            let flag = this._some(params.shiftBreaktimes, (item) => {
              return !item.breaktimeFrom || !item.breaktimeTo;
            });
            if (flag) {
              this.$message.warning('请设置休息时段');
              return false;
            }
          }

          this.checkedTime ? (params.shiftBreaktimes = params.shiftBreaktimes || []) : (params.shiftBreaktimes = []);
          params.shiftBreaktimes = params.shiftBreaktimes.filter((item) => item.breaktimeFrom && item.breaktimeTo);
          params.status = params.status == true ? 1 : 0;
          this.addData(params);
          this.dialogVisible = false;
        } else {
          //  dialogVisible = true
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible = false;
    },

    closeEvent(formName) {
      this.$refs[formName].resetFields();
    },

    rowSave(row, done, loading) {
      add(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          done();
        },
        (error) => {
          loading();
          window.console.log(error);
        }
      );
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          done();
        },
        (error) => {
          loading();
          console.log(error);
        }
      );
    },
    rowDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // return remove(row.id);
          return;
        })
        .then(() => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getTableData();
          }
        });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据');
        return;
      }
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // return remove(this.ids);
        })
        .then(() => {
          this.deleteCurrentData(Object.assign(this.selectionList));
        });
    },
    getOutExcel(fileName, res) {
      let blob = new Blob([res.data], {
        type: 'type: "application/vnd.ms-excel"'
      });
      if (window.navigator.msSaveOrOpenBlob) {
        //兼容 IE & EDGE
        navigator.msSaveBlob(blob, fileName);
      } else {
        var link = document.createElement('a');
        // 兼容不同浏览器的URL对象
        const url = window.URL || window.webkitURL || window.moxURL;
        // 创建下载链接
        link.href = url.createObjectURL(blob);
        //命名下载名称
        link.download = fileName;
        //点击触发下载
        link.click();
        //下载完成进行释放
        url.revokeObjectURL(link.href);
      }
    },

    // 导出
    downloadFile(data) {
      let blob = new Blob([data.data], { type: 'application/x-xls' });
      let url = window.URL.createObjectURL(blob);
      const link = document.createElement('a'); // 创建a标签
      link.href = url;
      link.download = `导出${new Date().getTime()}`; // 重命名文件
      link.click();
      URL.revokeObjectURL(url); // 释放内存
    },
    beforeOpen(done, type) {
      if (['edit', 'view'].includes(type)) {
        getDetail(this.form.id).then((res) => {
          this.form = res.data.data;
        });
      }
      done();
    },
    searchReset() {
      this.searchCriteria = {};
      this.getTableData();
    },
    searchChange(params, done) {
      this.searchCriteria = { ...params };
      // this.query = params;
      this.page.current = 1;
      this.page.size = 10;
      this.getTableData();
      done();
    },
    selectionChange(deleteVals) {
      this.selectionList = (deleteVals || []).map((item) => item.id);
      console.log(deleteVals, 'valcalacala', this.selectionList);
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.current = currentPage;
      this.getTableData();
    },
    sizeChange(pageSize) {
      this.page.size = pageSize;
      this.getTableData();
    },
    refreshChange() {
      this.getTableData();
    },
    // 重新加载公用表格弹窗组件
    newKey() {
      this.timer = new Date().getTime();
    },
    handleTabClick() {
      this.$nextTick(() => {
        this.$structuralSplit('班组班次配置');
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.subTitle {
  font-size: 16px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.85);
  .mr10 {
    margin-right: 10px;
  }
}
.dialogStyle {
  ::v-deep .el-dialog__body {
    padding: 0px 20px 20px 20px;
  }
  .verticalStyle {
    margin-bottom: 20px;
  }
  ::v-deep .el-divider {
    background-color: #409eff;
    height: 20px;
  }
  ::v-deep .el-divider--vertical {
    width: 8px;
  }
  ::v-deep .el-form-item {
    margin-bottom: 0px;
  }
}
.tableStyle {
  ::v-deep .spanStyle {
    margin-left: 5px;
    font-size: 8px !important;
  }
}
.el-icon-view:before {
  content: '\e6ce';
}
.iconStyle {
  width: 20px !important;
  height: 20px !important;
  font-size: 26px !important;
  margin-left: 20px !important;
}
.basic {
  margin-bottom: 15px;
}
::v-deep .el-dialog__header {
  padding: 16px 24px;
  min-height: 20px;
  border-bottom: 1px solid #f0f0f0;
}
::v-deep .el-dialog__footer {
  border-top: 1px solid #f0f0f0;
  padding: 10px 16px;
}
::v-deep .el-dialog {
  .avue-form__menu {
    display: none;
  }
}
</style>
